<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色</view>
			</view>
			<view class="tr">
				<view>boxRadius</view>
				<view>String</view>
				<view>0.5em</view>
				<view>窗口外框圆角</view>
			</view>
			<view class="tr">
				<view>buttonHeight</view>
				<view>Number</view>
				<view>3</view>
				<view>默认按钮栏高度，固定单位em</view>
			</view>
			<view class="tr">
				<view>iconReverse</view>
				<view>Boolean</view>
				<view>true</view>
				<view>针对checkbox类型菜单，复选框是否放在右侧</view>
			</view>
			<view class="tr">
				<view>title</view>
				<view>String</view>
				<view>无</view>
				<view>窗口标题</view>
			</view>
			<view class="tr">
				<view>useTitle</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用标题</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>dataList</view>
					<view>Array, Object</view>
					<view>无</view>
					<view>菜单数据集，根据不同mode，数据集格式有变化</view>
				</view>
				<view class="appendix">
					<view>
						radio、checkbox数据格式：{name:"", value:""}
						<view class="ml-e2">
							name：标题。实际键名为keys内定义的值
						</view>
						<view class="ml-e2">
							value：数值。实际键名为keys内定义的值
						</view>
					</view>
					<view class="mt-e1">
						tree、page数据格式：{id:"", name:"", children:[]}
						<view class="ml-e2">
							id：节点id。实际键名为keys内定义的值(默认空，自动生成id，有差异)
						</view>
						<view class="ml-e2">
							name：标题。实际键名为keys内定义的值
						</view>
						<view class="ml-e2">
							children：下级节点列表。实际键名为keys内定义的值
						</view>
					</view>
				</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>String, Number, Array</view>
				<view>无</view>
				<view>初始选中值。radio菜单为单个选项值，checkbox菜单为选项值数组；tree、page菜单为节点id数组（必须设置keys的id键名才能生效，否则需在节点数据设置_checked指定选中）</view>
			</view>
			<view class="tr">
				<view>point</view>
				<view>String</view>
				<view>bottom</view>
				<view>弹窗位置，有效值：top、center、bottom</view>
			</view>
			<view class="tr">
				<view>mode</view>
				<view>String</view>
				<view>radio</view>
				<view>选择类型，show单选无图标、radio单选、checkbox多选</view>
			</view>
			<view class="tr">
				<view>isTree</view>
				<view>Boolean, String</view>
				<view>false</view>
				<view>树模式，可选：false非树、tree普通树、page翻页书。开启后数据结构有差异</view>
			</view>
			<view class="tr">
				<view>treeSet</view>
				<view>Object</view>
				<view>无</view>
				<view>树组件设置，树模式tree、page有效。参数同tree组件</view>
			</view>
			<view class="tr">
				<view>resFormat</view>
				<view>String</view>
				<view>无</view>
				<view>返回数据格式，value、option(返回选项对象，携带name、value属性)、string(多选时使用拼接串格式返回)。为空等同value</view>
			</view>
			<view class="tr">
				<view>activeSubmit</view>
				<view>Boolean</view>
				<view>false</view>
				<view>单选立即提交</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>useSelectAll</view>
					<view>Boolean</view>
					<view>true</view>
					<view>针对checkbox类型菜单，是否使用全选与清空按钮</view>
				</view>
			</view>
			<view class="tr">
				<view>useSelectNum</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用查看选中数量，checkbox、tree、page模式有效</view>
			</view>
			<view class="tr">
				<view>useTreeClear</view>
				<view>Boolean</view>
				<view>true</view>
				<view>树模式使用清空按钮</view>
			</view>
			<view class="tr">
				<view>useTreeReset</view>
				<view>Boolean</view>
				<view>true</view>
				<view>针对tree、page类型菜单，以及开启了工具条，是否使用重置按钮（还原到初始选中）</view>
			</view>
			<view class="tr">
				<view>min</view>
				<view>Number</view>
				<view>1</view>
				<view>最小选择数</view>
			</view>
			<view class="tr">
				<view>max</view>
				<view>Number</view>
				<view>0</view>
				<view>最大选择数</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>String</view>
				<view>75vw</view>
				<view>窗口默认宽</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>无</view>
				<view>窗口默认高</view>
			</view>
			<view class="tr">
				<view>maxWidth</view>
				<view>String</view>
				<view>40em</view>
				<view>窗口最大宽，用于响应式</view>
			</view>
			<view class="tr">
				<view>maxHeight</view>
				<view>String</view>
				<view>80vh</view>
				<view>内容区最大高度</view>
			</view>
			<view class="tr">
				<view>bodyHeight</view>
				<view>String</view>
				<view>无</view>
				<view>内容区高度，设置则固定内容区高度，超出显示滚动条。不设置则自动撑高</view>
			</view>
			<view class="tr">
				<view>optionHeight</view>
				<view>Number</view>
				<view>3</view>
				<view>选项高度，非树使用，同时用于计算最大高度</view>
			</view>
			<view class="tr">
				<view>shift</view>
				<view>Object</view>
				<view>无</view>
				<view>窗口偏移，限制popup的显示区，用于自定义导航及自定义tab栏等。left、right、top、bottom</view>
			</view>
			<view class="tr">
				<view>spaceOutside</view>
				<view>Number, String, Array</view>
				<view></view>
				<view>对话框外间距，需带单位，可设置从上开始顺时针四个方向。top类型默认0.5em。bottom类型默认0.5em，下1.5em</view>
			</view>
			<view class="tr">
				<view>spaceInside</view>
				<view>Number, String, Array</view>
				<view></view>
				<view>对话框内间距，需带单位，可设置从上开始顺时针四个方向。top类型默认上0.5em。bottom类型默认下0.5em</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>keys</view>
					<view>Object</view>
					<view></view>
					<view>数据键名设置</view>
				</view>
				<view class="appendix">
					<view>name：name 标题名称</view>
					<view>value：value 真实值</view>
					<view>children：children 子集列表，树类型使用</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>checked：icon-checked 选中</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>confirm：确定　确定按钮</view>
					<view>cancel：取消　取消按钮</view>
					<view>showSelect：查看已选　工具按钮</view>
					<view>clear：清空　工具按钮</view>
					<view>reset：重置　工具按钮</view>
					<view>selected：已选　工具栏提示</view>
					<view>selectAll：全选　工具按钮</view>
					<view>tipSelectMinError：请至少选择${min}项　选择数量错误提示</view>
					<view>tipSelectMaxError：最多可选${max}项　选择数量错误提示</view>
				</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读</view>
			</view>
			<view class="tr">
				<view>submit</view>
				<view>事件</view>
				<view>	</view>
				<view>选择提交事件，单选提交单个选中值，多选提交选中列表。树模式根据resFormat配置可能返回单个或多个节点对象</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<vi-collapse title="树设置参数 treeSet" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>mode</view>
						<view>String</view>
						<view>树选择模式，可选值：show、radio、checkbox。默认值：checkbox</view>
					</view>
					<view class="tr">
						<view>searchSet</view>
						<view>Object</view>
						<view>搜索条设置，等同于tree组件内同名参数。默认值：{open:true}</view>
					</view>
					<view class="tr">
						<view>keyword</view>
						<view>String</view>
						<view>初始关键词，存在则初始化立即搜索</view>
					</view>
					<view class="tr">
						<view>searchLeaf</view>
						<view>Boolean</view>
						<view>仅搜索叶子节点，默认值：true</view>
					</view>
					<view class="tr">
						<view>radius</view>
						<view>String</view>
						<view>圆角，用于搜索条、提交按钮。默认值：circle</view>
					</view>
					<view class="tr">
						<view>checkboxPlain</view>
						<view>Boolean</view>
						<view>复选框镂空，默认值：false</view>
					</view>
					<view class="tr">
						<view>iconStatus</view>
						<view>Boolean</view>
						<view>使用展开状态图标。默认值：true</view>
					</view>
					<view class="tr">
						<view>iconNode</view>
						<view>Boolean</view>
						<view>使用节点图标，默认值：true</view>
					</view>
					<view class="tr">
						<view>selectNode</view>
						<view>Boolean</view>
						<view>show、radio模式允许选择树枝。默认值：false</view>
					</view>
					<view class="tr">
						<view>autoNodeType</view>
						<view>Boolean</view>
						<view>自动计算节点类型，开启则将第一层级节点设为根，无children的节点设为叶子。关闭则须在节点手动设置_isRoot=true指定根，_isLeaf=true指定叶子。默认值：true</view>
					</view>
					<view class="tr">
						<view>resFormat</view>
						<view>String</view>
						<view>
							树数据向外返回值格式，默认值：node节点对象。可选：
							<view>id：id列表</view>
							<view>path：带路径的节点信息对象列表(并非原节点对象)</view>
							<view>key：自选抽取键名，须设置resKey指定键名</view>
						</view>
					</view>
					<view class="tr">
						<view>resKey</view>
						<view>String</view>
						<view>配合resFormat使用</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{'&lt;vi-select mode="radio" title="" :dataList="数据集" :value="初始选中值">&lt;/vi-select>'}}
			</view>
			<view class="py-sm">
				<vi-select ref="demo1" title="单选" :dataList="list" :bodyMaxHeight="20" @submit="onSubmit"></vi-select>
				<vi-button @click="openWin('demo1')">radio</vi-button>
			</view>
			<view class="py-sm">
				<vi-select mode="checkbox" ref="demo2" title="多选" :dataList="list" :bodyMaxHeight="20" @submit="onSubmit"></vi-select>
				<vi-button @click="openWin('demo2')">checkbox</vi-button>
			</view>
			<view class="py-sm">
				<vi-select mode="checkbox" ref="demo3" title="多选" :dataList="list" :bodyMaxHeight="20" iconReverse @submit="onSubmit"></vi-select>
				<vi-button @click="openWin('demo3')">多选 iconReverse</vi-button>
			</view>
			<view class="py-sm">
				<vi-select mode="checkbox" isTree ref="demo4" title="树-多选" :dataList="tree" @submit="onSubmit"></vi-select>
				<vi-button @click="openWin('demo4')">树 checkbox</vi-button>
			</view>
			<view class="py-sm">
				<vi-select mode="radio" isTree ref="demo5" title="树-单选" :dataList="tree" @submit="onSubmit"></vi-select>
				<vi-button @click="openWin('demo5')">树 radio</vi-button>
			</view>
			<view class="py-sm">
				<vi-select mode="show" isTree ref="demo6" title="树-单选" :dataList="tree" @submit="onSubmit"></vi-select>
				<vi-button @click="openWin('demo6')">树 show</vi-button>
			</view>
			<view class="py-sm">
				<vi-select mode="show" isTree ref="demo7" title="树-单选" :dataList="tree" :treeSet="{selectNode:true}" @submit="onSubmit"></vi-select>
				<vi-button @click="openWin('demo7')">树 开启树枝选中</vi-button>
			</view>
			<view class="py-sm">
				<vi-select mode="checkbox" isTree="page" ref="demo8" title="翻页树-多选" :dataList="tree" @submit="onSubmit"></vi-select>
				<vi-button @click="openWin('demo8')">翻页树 checkbox</vi-button>
			</view>
			<view class="py-sm">
				<vi-select mode="radio" isTree="page" ref="demo9" title="翻页树-单选" :dataList="tree" @submit="onSubmit"></vi-select>
				<vi-button @click="openWin('demo9')">翻页树 radio</vi-button>
			</view>
			<view class="py-sm">
				<vi-select mode="show" isTree="page" ref="demo10" title="翻页树-单选" :dataList="tree" @submit="onSubmit"></vi-select>
				<vi-button @click="openWin('demo10')">翻页树 show</vi-button>
			</view>
			<view class="py-sm">
				<vi-select mode="show" isTree="page" ref="demo11" title="翻页树-单选" :dataList="tree" :treeSet="{selectNode:true}" @submit="onSubmit"></vi-select>
				<vi-button @click="openWin('demo11')">翻页树 开启树枝选中</vi-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{name:'选项1', value:1},
					{name:'选项2', value:2},
					{name:'选项3', value:3},
					{name:'选项4', value:4},
					{name:'选项5', value:5},
					{name:'选项6', value:6},
					{name:'选项7', value:7},
					{name:'选项8', value:8},
					{name:'选项9', value:9},
					{name:'选项0', value:0},
				],
				tree:{
					value:1,
					name:"根节点",
					children:[
						{value:2,name:"二级子节点1超长"},
						{value:3,name:"二级子节点2",_checked:true},
						{value:4,name:"二级子节点3",children:[
							{value:6,name:"三级子节点1超长",children:[
								{value:7,name:"四级子节点1超长",children:[{value:8,name:"五级子节点1超长"}]},
							]},
						]},
						{value:9,name:"二级子节点4"},
						{value:10,name:"二级子节点5"},
						{value:11,name:"二级子节点6"},
						{value:12,name:"二级子节点7"},
						{value:13,name:"二级子节点8"},
					]
				},
			}
		},
		methods: {
			onSubmit(e){
				console.log("提交数据",e);
			},
			onChange(e){
				console.log("变更数据",e);
			}
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
